<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
    .userinfo-img_header{
      float:right;
      width:58px; height:58px;
      margin:3px 10px;
      border-radius:20%;
      }
    </style>

</head>
<body style="background:#ffffff">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">个人资料</span>
</div>
<div id="app" v-cloak class="top-container">
    <div class="row-container">
        <a class="row" style="height:74px;line-height:74px;">
            <span>头像</span>
            <img class="userinfo-img_header" :src="user.memberAdd ? user.memberAdd : '../../image/portrait_moren.png'">
        </a>
        <a  class="row" >
            <span>昵称</span>
            <span>{{user.nickname}}</span>
        </a>
        <a class="row" v-myclick="openSexSelector" v-row-active>
            <span>性别</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{sex}}</span>
        </a>
        <a class="row" v-myclick="openCitySelector" v-row-active>
            <span>地区</span>
            <img class="row-arrow" v-src="'../../image/arrow_right_grey.png'">
            <span>{{user.province}} {{user.city}} {{user.district}}</span>
        </a>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>

<script>


    var clipBoard,
        UIActionSelector,
        vm,
        user,
        vn,
        scanner;

    apiready = function () {
        setBSImg();
        vn = new Vue({
            el: '#blank',
            data:{
              showfn:0
            },
            methods:{
            }
        });
        showProgress();


        clipBoard = api.require('clipBoard');
        UIActionSelector = api.require('UIActionSelector');
        getUserinfo();
        addListeners();
    };

    function getUserinfo() {
        var data = {
          member_id: getPrefs('member_id'),
          token:getPrefs('token'),
          wxOpenId:getPrefs('openid')
        };
        var callback = function (ret) {
            user = ret.content;
            initApp();
            api.parseTapmode();
        };

        pinet.post(APIURLP+'/play/user/queryUserInfo', data, callback);
    }

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                user: user

            },
            computed: {
                deposit: function () {
                    var d = Number(user.deposit);
                    return d > 0 ? '已缴纳' : '未缴纳';
                },
                sex: function () {
                    if (user.sex == '1') {
                        return '男';
                    } else if (user.sex == '2') {
                        return '女';
                    } else {
                        return '未知';
                    }
                },
                useridModal: function () {
                    return {
                        show: this.showUserid,
                        hide: !this.showUserid
                    }
                },
                qrcodeModal: function () {
                    return {
                        show: this.showQrcode,
                        hide: !this.showQrcode
                    }
                },
                inviteCodeModal: function () {
                    return {
                        show: this.showInviteCode,
                        hide: !this.showInviteCode
                    }
                }
            },
            methods: {
                openSexSelector: function () {
                    var index = this.user.sex == '2' ? 1 : 0;
                    var datas = [{"name": "男"}, {"name": "女"}];
                    var callback = function (ret) {
                        var sex = ret.eventType == 'ok' ? ret.level1 : '';
                        if (sex == '男') {
                            vm.updSex('1');
                        } else if (sex == '女') {
                            vm.updSex('2');
                        }
                    };
                    this.openUIActionSelector(datas, 1, [index], callback);
                },
                openCitySelector: function () {
                    var _datas = api.readFile({sync: true, path: 'widget://res/cities.json'});
                    var datas = JSON.parse(_datas);
                    var province_index, province, city_index, city, district_index;

                    if (this.user.province) {
                        for (var i = 0, l = datas.length; i < l; i++) {
                            if (datas[i].name == this.user.province) {
                                province = datas[i];
                                province_index = i;
                                if (this.user.city) {
                                    for (var i = 0, l = province.sub.length; i < l; i++) {
                                        if (province.sub[i].name == this.user.city) {
                                            city = province.sub[i];
                                            city_index = i;
                                            if (this.user.district) {
                                                for (var i = 0, l = city.sub.length; i < l; i++) {
                                                    if (city.sub[i].name == this.user.district) {
                                                        district_index = i;
                                                        break;
                                                    }
                                                }
                                            }
                                            break;
                                        }
                                    }
                                }
                                break;
                            }
                        }
                    }
                    province_index = province_index ? province_index : 0;
                    city_index = city_index ? city_index : 0;
                    district_index = district_index ? district_index : 0;

                    var actives = [province_index, city_index, district_index];
                    var callback = function (ret) {
                        if (ret.eventType == 'ok') {
                            vm.updCities(ret.level1, ret.level2, ret.level3);
                        }
                    };
                    this.openUIActionSelector(datas, 3, actives, callback);
                },
                openUIActionSelector: function (datas, col, actives, callback) {
                    var actives = actives ? actives : [0, 0, 0];
                    UIActionSelector.open({
                        datas: datas,
                        layout: {
                            col: col,
                            size: 20,
                            sizeActive: 22,
                            bg: '#eee',
                            colorActive: '#000',
                            colorSelected: '#000'
                        },
                        cancel: {
                            text: '',
                            bg: '#eee',
                            w:0,
                            h:0,
                            bgActive: '#eee',
                        },
                        ok: {
                            text: '完成',
                            size: 16,
                            w:70,
                            h:40,
                            bg: '#eee',
                            bgActive: '#ccc',
                            color: '#000',
                            colorActive: '#000'
                        },
                        title: {
                            text: '',
                        },
                        actives: actives
                    }, callback);
                },
                updSex: function (sex) {
                    var data = {
                        wxOpenId: getPrefs('openid'),
                        token:getPrefs('token'),
                        sex: sex
                    };
                    var callback = function (ret) {
                        if (ret.errcode == 0) {
                            vm.user.sex = sex;
                        } else {
                            api.alert({
                                title: '错误',
                                msg: '修改信息失败:' + ret.message,
                                buttons: ['确定']
                            }, function () {
                            });
                        }
                    }
                    pinet.post(APIURLP+'/play/user/editUserInfo', data, callback);
                },
                updCities: function (province, city, district) {

                    var data = {
                        wxOpenId: getPrefs('openid'),
                        token:getPrefs('token'),
                        province: province,
                        city: city,
                        district: district
                    };
                    console.log(JSON.stringify(data));
                    var callback = function (ret) {
                        if (ret.errcode == 0) {
                            vm.user.province = province;
                            vm.user.city = city;
                            vm.user.district = district;
                        } else {
                            api.alert({
                                title: '错误',
                                msg: '修改信息失败:' + ret.message,
                                buttons: ['确定']
                            }, function (ret, err) {

                            });
                        }
                    };
                    pinet.post(APIURLP+'/play/user/editUserInfo', data, callback);
                },
            },
            watch: {

            }
        });
    }

    function addListeners() {
    }
</script>
